<template>
<!--<button @click="toB">跳转到B</button>-->
<!--    <div class="video-container">-->
<!--        <video-->
<!--                ref="videoPlayer"-->
<!--                class="video-js vjs-big-play-centered custom-video-player"-->
<!--                controls-->
<!--                preload="auto"-->
<!--                width="640"-->
<!--                height="360"-->
<!--                data-setup="{}"-->
<!--        >-->
<!--            <source :src="videoUrl" type="video/mp4" />-->
<!--        </video>-->
<!--    </div>-->
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>更换头像</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-upload
                    ref="uploadRef"
                    class="avatar-uploader"
                    :show-file-list="false"
                    :auto-upload="true"
                    action="/api/upload"
                    name="file"
                    :on-success="uploadSuccess"
                >
                </el-upload>
                <br />
                <el-button type="primary" :icon="Plus" size="large"  @click="uploadRef.$el.querySelector('input').click()">
                    选择图片
                </el-button>
                <el-button type="success" :icon="Upload" size="large" @click="updateAvatar">
                    上传头像
                </el-button>
            </el-col>
        </el-row>
    </el-card>
    <input v-model="url">
</template>

<script setup>
import { Plus, Upload } from '@element-plus/icons-vue'
const url=ref()
function uploadSuccess(result){
    url.value=result.data

}
function updateAvatar(){

}
const uploadRef = ref()
import {useRoute,useRouter} from "vue-router";
// import videojs from "video.js";
// import 'video.js/dist/video-js.css';
// const videoUrl="https://video-hubs.oss-cn-beijing.aliyuncs.com/001.mp4"
// const videoPlayer = ref(null);

// 在组件挂载后初始化视频
// onMounted(() => {
//     const player = videojs(videoPlayer.value, {
//         // 你可以在这里添加额外的配置选项
//     });
// });

// 在组件销毁前销毁video.js实例，释放资源
// onBeforeUnmount(() => {
//     const player = videojs(videoPlayer.value);
//     if (player) {
//         player.dispose();
//     }
// });
import {onBeforeUnmount, onMounted, ref} from "vue";
import router from "@/router";
// const student=ref({
//     id:1,
//     name:"张三",
//     sex:"男"
// })
// function toB(){
//     // router.push({path:'/B',query:{id:student.value.id,name:student.value.name}})
//     router.push({path:'/B',query:{data:JSON.stringify(student.value)}})
// }
</script>

<style scoped>
.video-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.custom-video-player {
    /* 添加一些自定义的样式，可以根据需要进行修改 */
    background-color: #000;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 隐藏video.js的大播放按钮 */
.vjs-big-play-button {
    display: none !important;
}
</style>